<template>
  <div class="monitor-org-list">
    <tag-content-header>
      <template #title>
        <span class="title-text">选择分行</span>
      </template>
      <template #tools>
        <el-input
          v-model="orgNm"
          size="small"
          clearable
          placeholder="输入搜索关键字"
          @keyup.native.enter="getList"
          @clear="getList"
        >
          <el-button slot="append" type="primary" icon="el-icon-search" @click="getList"></el-button>
        </el-input>
      </template>
    </tag-content-header>
    <template v-if="dataList.length">
      <ul class="org-wrap">
        <li
          v-for="item in dataList"
          :key="item.orgId"
          class="org-item"
          :class="{ selected: selectOrgId === item.orgId }"
          @click="selectOrg(item.orgId)"
        >
          {{ item.orgNm }}
          <el-tag :type="item.alarmCount ? 'warning' : ''" effect="dark" size="mini">{{ item.alarmCount }}</el-tag>
        </li>
      </ul>
      <el-row>
        <el-col :span="24" align="right">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="params.currentPageNum"
            :page-size="params.pageSize"
            background
            small
            layout="total, prev, pager, next"
            :total="totalSize"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </template>
    <div class="no-record" v-else>暂无数据</div>
  </div>
</template>

<script>
export default {
  props: {
    tagId: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      orgNm: '',
      selectOrgId: '',
      dataList: [],
      loading: false,
      columns: [
        {
          show: true,
          label: '公司名称',
          prop: 'compNm',
          search: true,
          searchKey: '',
          align: 'left'
        },
        {
          show: true,
          label: '告警状态',
          prop: 'alarmStatus',
          align: 'center'
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  methods: {
    getList() {
      this.loading = true
      this.params.queryParams.tagId = this.tagId
      this.params.queryParams.orgNm = this.orgNm
      this.$ajax({
        url: this.$ajax.setUrl('mon/monTagDetail/org/page'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dataList = data.data.records
          this.totalSize = data.data.totalSize
          if (this.dataList.length) {
            this.selectOrg(this.dataList[0].orgId)
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    handleCurrentChange(num) {
      this.params.currentPageNum = num
      this.getList()
    },
    selectOrg(orgId) {
      this.selectOrgId = orgId
      this.$emit('changeOrg', this.selectOrgId)
    },
    reset() {
      this.orgNm = ''
      this.selectOrgId = ''
      this.dataList = []
      this.params = {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      }
      this.totalSize = 0
    }
  }
}
</script>

<style lang="scss">
.monitor-org-list {
  margin-top: 20px;
  .org-wrap {
    margin-top: 16px;
    margin-bottom: 8px;
    min-height: 60px;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .org-item {
    padding: 10px 20px;
    border: 1px dotted #ddd;
    margin: 10px;
    cursor: pointer;
    border-radius: 4px;
    &.selected {
      color: #4d82e9;
      background-color: #f4f4f4;
    }
  }
  .no-record {
    text-align: center;
    line-height: 32px;
    color: #787878;
  }
  .tag-content-header .content-tools .el-button {
    padding-left: 12px;
  }
}
</style>
